<template>
    <div>

    </div>
</template>

<script setup>
import { onMounted } from 'vue';

import THREE from 'three';
import PCLWrapper from 'pcl';

onMounted(() => {
    init();
});

const init = () => {
    // 创建Three.js场景
    const scene = new THREE.Scene();

    // 创建Three.js相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建Three.js渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);

    // 创建点云网格
    const geometry = new THREE.BufferGeometry().fromArray(points);
    const material = new THREE.PointsMaterial({ color: 0xff0000 });
    const pointCloud = new THREE.Points(geometry, material);

    // 向场景中添加点云网格
    scene.add(pointCloud);
    
    const filePath = '/static/pcd/Zaghetto.pcd';
    
    // 创建PCLWrapper实例
    const wrapper = new PCLWrapper();

    // 加载PCD文件
    wrapper.load(filePath)
        .then((data) => {
            const points = data['points']; // 获取点云数据

            // 根据点云数据生成Three.js场景
            const scene = createSceneFromPoints(points);

            // 添加场景到HTML页面上的canvas元素
            document.body.appendChild(scene.renderer.domElement);

            // 设置动画帧更新函数
            function animate() {
                requestAnimationFrame(animate);

                // 更新场景
                scene.update();
            }

            // 调用动画帧更新函数
            animate();
        })
        .catch((error) => {
            console.log(`Error loading PCD file: ${error}`);
        });
};
</script>

<style lang="scss" scoped></style>